<template lang="pug">
.switch-lesson-root(v-show="reUseShow")
  .modal-dialog.modal__overwrite.modal__lession-switch(role='document')
    .modal-content
      .modal-header
        h5.modal-title 作业辅导复用
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true', @click="close") ×
      .modal-body
        .modal-body-main
          .add-list
            .list-title 所属目录:
            .list-content
              input.content-input(type="input", placeholder="时间和即刻2")
              span.time-tips 系统将自动生成同级节点
          .add-list
            .list-title 作业辅导名称:
            .list-content
              input.content-input(type="input", placeholder="(空)")                    
          .add-list
            .list-title 状态:
            .list-content
              .share
                span.share-select
                span.share-text 共享
              .share
                span.share-select
                span.share-text 不共享

          .add-list-class
            .add-list
              .list-title 发布班级:
              .list-class
                .class-title
                  span.class-select
                  span.class-name  高中5班（23 / 37）
            .class-student-list
              .student(v-for="(student, index) in students")
                .span.student-select
                .span.student-name {{student.name}}
          .add-list-class
            .add-list
              .list-title 发布班级:
              .list-class
                .class-title
                  span.class-select
                  span.class-name  高中5班（23 / 37）
          .add-list
            .list-title 开始时间:
            .list-content
              input.content-input(type="input")
          .add-list
            .list-title 结束时间:
            .list-content
              input.content-input(type="input")
              span.time-tips 不选择时间 一直开放
          .add-list
            .list-btns
              a.btn.btn-save(href="javascript:void(0)", @click="addTutorSave") 保存              
              a.btn.btn-reset(href="javascript:void(0)", @click="TutorReset") 重设
          
</template>

<style lang="scss" scoped>
::-webkit-input-placeholder {
  text-align: left;
}
:-moz-placeholder {
  text-align: left;
}
::-moz-placeholder {
  text-align: left;
}
.modal-body-main {
  .add-list-class {
    background: #FAFAFA;
    border-bottom: 1px solid #ECECEC;
    font-size: 12px;
    .class-student-list {
      margin-right: 28px;
      padding-left: 12%;
      .student {
        display: inline-block;
        margin-right: 28px;
        margin-top: 10px;
        margin-bottom: 20px;
        .student-select {
          width: 18px;
          height: 18px;
          border: 1px solid $teacherMainColor;
          float: left;
          margin-right: 10px;
          cursor: pointer;
        }
        .student-name {
          width: 48px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;          
        }
      }
    }
  }
  .add-list {
    background: #FAFAFA;
    height: 48px;
    line-height: 48px;
    font-size: 12px;
    border-bottom: 1px solid #ECECEC;
    .list-title {
      float: left;
      width: 12%;
      text-align: right;
      padding-right: 10px;
    }
    .list-content {
      .content-input {
        display: inline-block;
        width: 200px;
        height: 28px;
        line-height: 28px;
        padding-left: 10px;
        border: 1px solid #157EF2;
        color: #A5A5A5;
        border-radius: 4px;
        text-align: left;
        box-sizing: border-box;
      }
      .time-tips {
        color: #FF1905;
        padding-left: 8px;
      }
      .share {
        height: 18px;
        line-height: 18px;
        display: inline-block;
        margin-right: 24px;
        color: $teacherMainColor;
        .share-select {
          border: 1px solid #157EF2;
          border-radius: 4px;
          width: 18px;
          height: 18px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 4px;
          cursor: pointer;
        }
      }
      .class-title {
        .class-select {
          border: 1px solid #157EF2;
          border-radius: 4px;
          width: 18px;
          height: 18px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 4px;
          cursor: pointer;          
        }
      }
    }
    .list-btns {
      text-align: center;
      .btn {
        width: 140px;
        display: inline-block;
        margin: 0 auto;
        border: 1px solid #157EF2;
        border-radius: 6px;
        background: #fff;
        color: #157EF2;
        font-size: 12px;
        cursor: pointer;
        padding: 4px 30px;
        box-sizing: border-box;      
      }
      .btn:nth-child(even) {
        margin-left: 56px;
      }
      .btn:hover {
        background: $teacherMainColor;
        color: #fff;
      }
    }
  }

}

</style>

<script>
import { mapState } from 'vuex'
import api from 'api/lession'
export default {
  data () {
    return {
      changePassword: false,
      semester: [],
      uploadResult: false,
      uploadSuccess: true,
      uploadError: false,
      students: [{
        student_id: 1,
        name: 'likaifu'
      }, {
        student_id: 2,
        name: 'mahuateng'
      }, {
        student_id: 3,
        name: '汉语'
      }, {
        student_id: 4,
        name: 'balabalabalbabababababab汉语'
      }, {
        student_id: 5,
        name: '程子昂'
      }, {
        student_id: 6,
        name: '欧阳蛤蟆'
      }, {
        student_id: 7,
        name: '欧阳蛤蟆'
      }, {
        student_id: 8,
        name: '欧阳蛤蟆'
      }, {
        student_id: 9,
        name: '欧阳蛤蟆'
      }]
    }
  },
  computed: mapState({
    reUseShow: state => state.modal.reUseShow
  }),
  watch: {
    show (val) {
      if (val) {
        this.getSemester()
      }
    }
  },
  methods: {
    getSemester () {
      api.getSemester().then((response) => {
        this.semester = response.data.data
      })
    },
    close () {
      this.$store.commit('addLession', false)
    },
    closePop () {
      this.$store.commit('addLession', false)
      this.uploadResult = false
    },
    switchScenes () {
      this.changePassword = !this.changePassword
    },
    addTutorSave () {
      this.addNewTutorShow = false
      console.log('save')
    },
    TutorReset () {
      this.addNewTutorShow = false
      console.log('reset')
    },
    btnConfirm () {
      this.uploadResult = true
    }
  }
}
</script>